<template>
	<view class="store-settled">
		<image class="store_img" src="../../static/image/store_recruitment_bg.png" mode=""></image>
		<view class="content">
			<view class="apply-form bg-white">
				<!-- 商家名称 -->
				<view class="apply-form-item">
					<u-field label="商家名称" v-model="form.name" label-width="160" placeholder="请输入商家名称" required />
				</view>
				<view class="apply-form-item">
					<u-field label="经销商编号" v-model="form.sn" label-width="160" placeholder="请输入经销商编号" required />
				</view>

				<!-- 主营行业 -->
				<view class="apply-form-item" @tap="showPop=true">
					<u-field label="主营类目" v-model="form.clabel" label-width="160" style="flex: 1;" placeholder="请选择行业类目"
						required disabled>
						<u-icon name="arrow-right" slot="right" size="28" />
					</u-field>
				</view>

				<!-- 联系人姓名 -->
				<view class="apply-form-item">
					<u-field label="联系人姓名" v-model="form.nickname" label-width="160" placeholder="请输入联系人姓名" required />
				</view>

				<!-- 手机号码 -->
				<view class="apply-form-item">
					<u-field label="手机号码" v-model="form.mobile" label-width="160" placeholder="请输入手机号码" required />
				</view>

				<view class="apply-form-item">
					<u-field label="身份证号" v-model="form.identity_card" label-width="160" placeholder="请输入身份证号" required />
				</view>
<!-- 	<view class="apply-form-item"  @click="showRegion = true">
		<u-field v-model="region" label-width="160" :disabled="true" label="所在地区" placeholder="请选择省、市、区" right-icon="arrow-right" required>
		</u-field>
	</view>
	<view class="apply-form-item">
		<u-field v-model="form.address" type="textarea" label-width="160" label="详细地址" placeholder="请填写小区、街道、门牌号等信息"
			:field-style="{flex: 1, height: '200rpx'}" required  @input="getAddressInput" />
	</view> -->
<view class="" v-for="(row,rowindex) in form.address_list">
	<view class="flex-start" style="position: relative;">
		<view class="" style="width: 700rpx;" @click="getindex(rowindex)">
			<view class="apply-form-item"  @click="showRegion = true">
				<u-field v-model="row.region" label-width="160" :disabled="true" label="所在地区" placeholder="请选择您门店所在的省、市、区" right-icon="arrow-right" required>
				</u-field>
			</view>
		</view>
		<!-- <view style="position: absolute;right: 14rpx;" class="iconfont addbut_s" v-if="rowindex != 0" @click="removeDomain(rowindex)">&#xe62f;</view> -->
		<view style="position: absolute;right: 12rpx;" v-if="rowindex != 0" @click="removeDomain(rowindex)">
			<image class="xxBut" src="../../static/image/xx.png"></image>
		</view> 
	</view>
	<view class="apply-form-item">
		<u-field v-model="row.address" type="textarea" label-width="160" label="详细地址" placeholder="请填写您门店所在的街道、名牌号等信息，方便地图进行定位"
			:field-style="{flex: 1, height: '200rpx'}" required  @input="getAddressInput" />
	</view>
	<view class="apply-form-item">
		<u-field :label="'门店照片('+row.door_img.length+'/3)'"  label-width="200" :border-bottom="false"required disabled />
		<view>
			<u-upload ref="uUpload" :file-list="row.door_img_preview" :show-progress="false" :header="{token: $store.getters.token}"
				:max-count="3" width="150" height="150" :action="action" upload-text="上传图片"
				@on-success="onSuccess($event,rowindex)"  @on-remove="onRemove($event,rowindex)" />
		</view>
		<!-- <view class="muted m-t-20 m-b-30">支持jpg、png、jpeg格式的图片，最多可上传10张</view> -->
	</view>
	<view class="apply-form-item">
		<u-field :label="'店内照片('+row.indoor_img.length+'/3)'" label-width="200" :border-bottom="false"
			required disabled />
		<view>
			<u-upload ref="uUpload" :file-list="row.indoor_img_preview" :show-progress="false" :header="{token: $store.getters.token}"
				:max-count="3" width="150" height="150" :action="action" upload-text="上传图片"
				@on-success="onSuccess2($event,rowindex)"  @on-remove="onRemove2($event,rowindex)" />
		</view>
	</view>
	<view class="apply-form-item">
		<u-field :label="'导购员照片('+row.sales_img.length+'/3)'" label-width="200" :border-bottom="false"
			required disabled />
			<!-- :file-list="fileList" -->
		<view>
<!-- 			<view class="" style="width: 500rpx; box-sizing: border-box;">
				{{row.sales_img}}
			</view> -->
			<u-upload ref="uUpload" :file-list="row.sales_img_preview" :show-progress="false" :header="{token: $store.getters.token}"
				:max-count="3" width="150" height="150" :action="action" upload-text="上传图片"
				@on-success="onSuccess3($event,rowindex)"  @on-remove="onRemove3($event,rowindex)" />
		</view>
	</view>
</view>
<view class="flex-center" style="margin-top: 16rpx;" @click="add()">
	<view class="iconfont addbut_s">&#xe726;</view>
	<text class="addbut">新增门店信息</text>
</view>

				<!-- 验证码 -->
				<!-- <view class="apply-form-item">
					<u-field label="验证码" label-width="160" placeholder="请输入验证码" required v-model="form.code">
						<view slot="right" class="primary send-code-btn br60 flex row-center" @tap="sendSmsFun">
							<u-verification-code unique-key="store-settled" ref="uCode" @change="codeChange">
							</u-verification-code>
							<view class="xs">{{codeTips}}</view>
						</view>
					</u-field>
				</view>
 -->
				<!-- 验证码 -->
				<u-field label-width="160" v-model="form.run_start_time" label="营业时间" placeholder="请选择营业时间"@tap="getbirthday(1)" required></u-field>
				<u-field label-width="170" v-model="form.run_end_time" label="营业结束时间" placeholder="请选择营业结束时间"@tap="getbirthday(2)" required></u-field>
				<u-picker v-model="birthday" mode="time":params="params" @confirm="confirmbirthday"></u-picker>
				<view class="apply-form-item">
					<u-field label="管理账号" v-model="form.account" label-width="160" placeholder="请设置管理账号(可用手机号代替)"
						required />
				</view>

				<!-- 设置密码 -->
				<view class="apply-form-item">
					<u-field label="设置密码" :password="true" v-model="form.password" label-width="160"
						placeholder="请设置登录密码" required />
				</view>

				<!-- 上传图片 -->
<!-- 				<view class="apply-form-item">
					<u-field label="营业执照" label-width="160" placeholder="请上传营业执照及行业相关资质证明" :border-bottom="false"
						required disabled />
					<view>
						<u-upload ref="uUpload" :show-progress="false" :header="{token: $store.getters.token}"
							:max-count="10" width="150" height="150" :action="action" upload-text="上传图片"
							@on-success="onSuccess"  @on-remove="onRemove" />
					</view>
					<view class="muted m-t-20 m-b-30">支持jpg、png、jpeg格式的图片，最多可上传10张</view>
				</view> -->

				<!-- 同意协议 -->
				<view class="apply-form-item flex">
					<u-checkbox shape="circle" :active-color="colorConfig.primary" v-model="isAgree">
						<text class="sm">已阅读并同意</text>
					</u-checkbox>
					<router-link :to="{path: '/bundle/pages/server_explan/server_explan', query: {type: 3}}">
					<text class="primary sm">《入驻协议》</text>
					</router-link>
				</view>

				<!-- 提交申请 -->
				<view style="padding: 30rpx 20rpx 30rpx 0;">
					<button type="primary" size="lg" class="br60" @tap="onSubmit">提交申请</button>
				</view>

				<!-- 查阅记录 -->
				<router-link to="/bundle_b/pages/settled_recode/settled_recode">
					<view class="flex row-center muted">
						<u-icon name="order" size="32" />
						<view class="m-l-10">查看提交记录</view>
					</view>
				</router-link>
			</view>
		</view>
		<u-select v-model="showRegion" mode="mutil-column-auto" @confirm="regionChange" :list="lists"></u-select>
		<u-select v-model="showPop" mode="single-column" value-name="id" label-name="name" :list="shopCategory"
			@confirm="confirmSelect"></u-select>
	</view>
</template>

<script>
	import {
		getShopCategory,
		shopApply,
		shopApplyEdit
	} from "@/api/shop"
	import {
		baseURL
	} from '@/config/app'
	import {
		sendSms,prepay, getPayway
	} from '@/api/app'
	import { wxpay, alipay } from '@/utils/pay'
	import {
		SMSType
	} from '@/utils/type'
	import area from '@/utils/area'
	var QQMapWX = require('@/public/qqmap-wx-jssdk.min.js');
 
	// 实例化API核心类
	var qqmapsdk = new QQMapWX({
	    key: '3MHBZ-LG2WX-U4W4Z-ZQSIX-LZGMQ-MYBQ6' // 必填
	});
	export default {
		data() {
			return {
				order_id:'',
				isAdd:1,
				latitude:'',
				longitude:'',
				showRegion:false,
				lists:[],
				region: '',
				isAgree: false,
				// 表单数据
				form: {
					cid: '',
					clabel: '',
					name: '',
					nickname: '',
					mobile: '',
					account: '',
					password: '',
					code: '',
					identity_card:'',
					sn:'',
					run_start_time:'',
					run_end_time:'',
					address_list:[
						{
							address:'',
							region:'',
							latitude:'',
							longitude:'',
							door_img:[],
							indoor_img:[],
							sales_img:[],
						}
					]
				},
				codeTips: '',
				shopCategory: [],
				showPop: false,
				imgPrewUrl:baseURL,
				action: baseURL + '/api/file/formimage',
				// fileList: [],
				// fileList: [
				// 	{
				// 		url: "https://fx.senge.com/uploads/user/446/2023071714062556cb62427.png",
				// 	},{
				// 		url: "https://fx.senge.com/uploads/user/446/20230717140920c51474825.jpg",
				// 	}
				// ],
				lineidx: '',
				params: {
					// year: true,
					// month: true,
					// day: true,
					hour: true,
				},
				birthday: false,
				birthdaytype: '',
			}
		},
		// onLoad(options) {
		// 	this.getShopCategoryFun()
		// 	this.$nextTick(() => {
		// 		this.lists = area
		// 	})
		// 	if(this.$Route.query.obj){
		// 		this.isAdd=0
		// 		var detailData=JSON.parse(this.$Route.query.obj)
		// 		this.form=detailData
		// 		this.form.clabel=detailData.cid_desc
		// 		this.region = detailData.province_name + " " + detailData.city_name + " " + detailData.district_name
		// 	}
		// },
		onLoad(options) {
			this.getShopCategoryFun()
			this.$nextTick(() => {
				this.lists = area
			})
			if(this.$Route.query.obj){
				this.isAdd=0
				var detailData=JSON.parse(this.$Route.query.obj)
				for(var i=0;i<detailData.address_list.length;i++){
					detailData.address_list[i].sales_img_preview=[]
					detailData.address_list[i].door_img_preview=[]
					detailData.address_list[i].indoor_img_preview=[]
					for(var j=0;j<detailData.address_list[i].sales_img.length;j++){
						detailData.address_list[i].sales_img_preview.push({
							url:detailData.address_list[i].sales_img[j]
						})
					}
					for(var j=0;j<detailData.address_list[i].door_img.length;j++){
						detailData.address_list[i].door_img_preview.push({
							url:detailData.address_list[i].door_img[j]
						})
					}
					for(var j=0;j<detailData.address_list[i].indoor_img.length;j++){
						detailData.address_list[i].indoor_img_preview.push({
							url:detailData.address_list[i].indoor_img[j]
						})
					}
				}
				this.form=detailData
				this.form.clabel=detailData.cid_desc
				console.log('detailData',detailData)
				// this.region = detailData.province_name + " " + detailData.city_name + " " + detailData.district_name
			}
		},
		methods: {
			getbirthday(type){
				this.birthday = true
				this.birthdaytype = type
			},
			confirmbirthday(e){
				console.log(this.birthdaytype)
				if(this.birthdaytype ==1){
					// this.run_start_time = e.year + '-' +e.month + '-' +e.day + ' ' + e.hour +":00"
					this.form.run_start_time =e.hour +":00"
				}else{
					this.form.run_end_time =  e.hour +":00"
				}
				
			},
			removeDomain(rowindex) {
				console.log(rowindex)
				  this.form.address_list.splice(rowindex, 1)
				  console.log(this.form.address_list)
			},
			getindex(rowindex){
				// console.log('rowindex',rowindex)
				this.lineidx = rowindex;
				console.log('rowindex',this.lineidx)
				this.form.address_list[rowindex].address=''
			},
			add(){
				this.form.address_list.push(
					{
						address:'',
						door_img:[],
						indoor_img:[],
						sales_img:[],
					}
				)
				// console.log(this.form.address_list)
			},
			getAddressInput(value){
				// console.log('value',value)
				var that=this
				// console.log('region222',that.form.address_list[this.lineidx].region)
				qqmapsdk.geocoder({
					
				      //获取表单传入地址
				      address: that.form.address_list[that.lineidx].region+value, //地址参数，例：固定地址，address: '北京市海淀区彩和坊路海淀西大街74号'
				      success: function(res) {//成功后的回调
					  // console.log('that.form',that.form)
				      	that.form.address_list[that.lineidx].latitude=res.result.location.lat
				      	that.form.address_list[that.lineidx].longitude=res.result.location.lng
						console.log('that.longitude',that.longitude)
				    }
				})
			},
			regionChange(region) {
				// console.log('region',region)
				// console.log('lineidx',lineidx)
				var that=this
				that.form.address_list[this.lineidx].province_id = region[0].value;
				that.form.address_list[this.lineidx].city_id = region[1].value;
				that.form.address_list[this.lineidx].district_id = region[2].value;
				that.form.address_list[this.lineidx].region = region[0].label + " " + region[1].label + " " + region[2].label
				// console.log('region111',that.form.address_list[this.lineidx].region)
				// qqmapsdk.geocoder({
				//       //获取表单传入地址address
				//       address: that.region+that.form.address_list[this.lineidx].address, //地址参数，例：固定地址，address: '北京市海淀区彩和坊路海淀西大街74号'
				//       success: function(res) {//成功后的回调
				//       	that.latitude=res.result.location.lat
				//       	that.longitude=res.result.location.lng
				// 		console.log(that.latitude)
				//     }
				// })
			},
			// 获取主营类目
			async getShopCategoryFun() {
				const {
					code,
					data
				} = await getShopCategory()
				if (code == 1) {
					this.shopCategory = data
				}
			},
			sendSmsFun() {
				if(!this.$refs.uCode.canGetCode) return
				if (!this.form.mobile) {
					this.$toast({
						title: '请填写手机号信息'
					})
					return;
				}
				sendSms({mobile: this.form.mobile, key: SMSType.SJSQYZ}).then(res => {
				    if(res.code == 1) {
				        this.$toast({title:res.msg});
				        this.$refs.uCode.start();
				    }
				})
			},
			codeChange(tip) {
				this.codeTips = tip
			},
			// 提交表单
			async onSubmit() {
				const {
					form,
					isAgree,
					fileList
				} = this
				const submitObj = {
					...form,
					license: fileList,
					// latitude:this.latitude,
					// longitude:this.longitude,


				}
				delete submitObj.clabel
				if (!isAgree) return this.$toast({
					title: '请先同意《入驻协议》'
				})
				if(this.isAdd==1){
					const {
						data,
						code,
						msg
					} = await shopApply(submitObj)
					this.order_id=data.id
					if(code == 1) {
						this.$toast({
							title: msg
						})
						setTimeout(() => {
							if(data.pay_status==0){
								prepay({
									from: 'shop_apply',
									order_id: data.id,
									pay_way: 1,
								}).then(({ code, data }) => {
									switch(code) {
										case 1: 
											this.handleWechatPay(data); 
											break;
										case 10001: 
											this.handleAlipayPay(data); 
											break;
										case 20001: 
											this.handleWalletPay(); 
											break;
									}
								}).catch(err => {
									
								}).finally(() => {
									setTimeout(() => {
										this.loadingPay = false
									}, 500)
								})
							}else{
								this.$Router.replace({
									path: '/bundle_b/pages/settled_result/settled_result',  
									query: {
										id: data.id
									}
								})
							}
						},1000)
						
					}
				}else{
					delete submitObj.audit_status
					const {
						data,
						code,
						msg
					} = await shopApplyEdit(submitObj)

					this.order_id=data.id
					if(code == 1) {
						this.$toast({
							title: msg
						})
						setTimeout(() => {
							if(data.pay_status==0){
								prepay({
									from: 'shop_apply',
									order_id: data.id,
									pay_way: 1,
								}).then(({ code, data }) => {
									switch(code) {
										case 1: 
											this.handleWechatPay(data); 
											break;
										case 10001: 
											this.handleAlipayPay(data); 
											break;
										case 20001: 
											this.handleWalletPay(); 
											break;
									}
								}).catch(err => {
									
								}).finally(() => {
									setTimeout(() => {
										this.loadingPay = false
									}, 500)
								})
							}else{
								this.$Router.replace({
									path: '/bundle_b/pages/settled_result/settled_result',
									query: {
										id: data.id
									}
								})
							}
							
							
						},1000)
						
					}
				}
				
			},
			// 微信支付
			handleWechatPay(data) {
				wxpay(data).then(res => {
					console.log(res)
					this.handPayResult(res)
				}).catch(err => {
					console.log(err)
				})
			},
			// 支付后处理
			handPayResult(result) {
				
				this.$Router.replace({
					path: '/bundle_b/pages/settled_result/settled_result',
					query: {
						id: this.order_id
					}
				})
			},
			confirmSelect(e) {
				const {
					value,
					label
				} = e[0]
				this.form.cid = value
				this.form.clabel = label
			},
			onSuccess(e,index2) {
				this.form.address_list[index2].door_img.push(e.data.base_uri)
				
			},
			onRemove(index,index2) {
				this.form.address_list[index2].door_img.splice(index, 1)
				this.form.address_list[index2].door_img_preview.splice(index, 1)
			},
			onSuccess2(e,index2) {
				console.log(this.imgPrewUrl)
				this.form.address_list[index2].indoor_img.push(e.data.base_uri)
				
			},
			onRemove2(index,index2) {
				this.form.address_list[index2].indoor_img.splice(index, 1)
				this.form.address_list[index2].indoor_img_preview.splice(index, 1)
			},
			onSuccess3(e,index2) {
				this.form.address_list[index2].sales_img.push(e.data.base_uri)
				
			},
			onRemove3(index,index2) {
				this.form.address_list[index2].sales_img.splice(index, 1)
				this.form.address_list[index2].sales_img_preview.splice(index, 1)
			},
		},

	}
</script>

<style lang="scss">
	.store-settled {
		background-color: #fef5e4;
		min-height: 100vh;
		// background-image: url(../../static/image/store_recruitment_bg.png);
		background-repeat: no-repeat;
		background-size: 100% auto;
		overflow: hidden;
.store_img{
	width: 100%;
	height: 340rpx;
}
		.content {
			// margin-top: 320rpx;
			margin-top: 0rpx;
			padding: 0 20rpx 31rpx;

			.apply-form {
				border-radius: 8px;
				padding: 20rpx 0 30rpx 26rpx;

				.apply-form-item {
					.send-code-btn {
						height: 56rpx;
						width: 188rpx;
						border: 1rpx solid $-color-primary;
					}
				}

				.primary-btn {
					width: 100%;
					height: 88rpx;
					background-color: $-color-primary;
				}
			}
		}

		// .pop-categories {
		// 	.reason-item {
		// 		padding: 24rpx 20rpx;

		// 		.reason-desc {
		// 			line-height: 46rpx;
		// 		}
		// 	}
		// }
	}
	.addbut_s{
		text-align: center;
		color:#808080;
		font-size: 34rpx;
	}
	.addbut{
		font-size: 28rpx;
		margin-left: 12rpx;
		
	}
	.xxBut{
		width: 36rpx;
		height: 36rpx;
	}
</style>
